<template>
    <div>
        <h1>vuex 测试</h1>
        Clicked: {{ getCount }} times
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <div class="input_test">
            <el-form :model="formPassword" labelWidth="80px" label-position="left">

                <el-form-item v-if="visible">
                    <el-input type="password" v-model="formPassword.newPassword" placeholder="请输入密码">
                    </el-input>
                    <div class="eye_box" @click="changePass('show')">
                        <i class="fa fa-eye" style="font-size: 24px"></i>
                    </div>
                </el-form-item>
                <el-form-item v-else>
                    <el-input type="text" v-model="formPassword.newPassword" placeholder="请输入密码">
                    </el-input>
                    <div class="eye_box2" @click="changePass('hide')" >
                        <i class="fa fa-eye-slash" style="font-size: 24px"></i>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss">
    .input_test {
        width: 300px;
        padding-top: 20px;
        .el-input__inner {
            position: relative;
        }
        .eye_box {
            position: absolute;
            top: 3px;
            right: 10px;
        }
        .eye_box2 {
            position: absolute;
            top: 3px;
            right: 10px;
        }
    }
</style>
<script>
    import {mapGetters} from 'vuex'
    import {mapActions} from 'vuex'

    export default {
        data() {
            return {
                formPassword: {
                    oldPassword: '',
                    newPassword: ''
                },
                visible: true
            }
        },
        computed: {
            // 使用对象展开运算符将 getters 混入 computed 对象中
            ...mapGetters([
                'getCount'
                // ...
            ])
        },
        methods: {
            ...mapActions([
                'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
                'decrement'
            ]),
            changePass(value) {
                this.visible = !(value === 'show');
            }    //判断渲染，true:暗文显示，false:明文显示
        }
    }

</script>
